<template>
  <div>
    <el-upload
      :key="fileKey"
      v-model="value"
      :data="qiniuDataObj"
      accept="image/png,image/jpeg,image/jpg,image/gif"
      show-file-list
      :on-preview="handlePictureCardPreview"
      :on-success="handleSuccess"
      :on-remove="handleRemove"
      :action="fileUpUrl"
      list-type="picture-card"
      :file-list="showList"
      :disabled="isDisabled"
    >
      <i class="el-icon-plus" />
    </el-upload>
    <el-dialog  :close-on-click-modal="false"  key="imgShow" :visible.sync="dialogVisible" :modal="false">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
  // import { fileToken } from '@/api/system/qiniuApi'

  export default {
    props: {
      value: {
        type: String
      }, isDisabled: {
        default: false
      }, fileKey: { default: '' }
    },
    data() {
      return {
        showList: [],
        qiniuDataObj: { token: '' },
        fileUpUrl: process.env.BASE_API + '/file/upload',
        fileUrl: process.env.BASE_FILE_URL,
        dialogImageUrl: null,
        dialogVisible: false
      }
    },
    watch: {
      fileKey: function(newQuestion, oldQuestion) {
        this.showList = []
        if (this.value != null) {
          var json
          try {
            json = JSON.parse(this.value)
          } catch (e) {
            json = [this.value]
            this.$emit('input', JSON.stringify([this.value]))
          }
          for (let j = 0; j < json.length; j++) {
            var httpUrl = json[j]
            if (httpUrl.indexOf('http') !== 0) {
              // eslint-disable-next-line no-const-assign
              httpUrl = this.fileUrl + httpUrl
            }
            this.showList.push({
              name: '',
              url: httpUrl,
              response: { key: json[j] }
            })
          }
        }
      }
    },
    created() {
      // fileToken().then(response => {
      //   console.log('created')
      //   this.qiniuDataObj.token = response.data
      // })
      this.showList = []
      if (this.value != null) {
        var json
        try {
          json = JSON.parse(this.value)
        } catch (e) {
          json = [this.value]
          this.$emit('input', JSON.stringify([this.value]))
        }
        for (let j = 0; j < json.length; j++) {
          var httpUrl = json[j]
          if (httpUrl.indexOf('http') !== 0) {
            // eslint-disable-next-line no-const-assign
            httpUrl = this.fileUrl + httpUrl
          }
          this.showList.push({
            name: '',
            url: httpUrl,
            response: { key: json[j] }
          })
        }
      }
    },
    methods: {
      // 放大显示图片
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      // 上传成功回调
      handleSuccess(res, file) {
        console.log('上传成功回调')
        var json
        if (this.value == null) {
          json = []
        } else {
          try {
            json = JSON.parse(this.value)
          } catch (e) {
            json = [this.value]
          }
        }
        json.push(res.data.address)
        this.$emit('input', JSON.stringify(json))
      },
      // 删除回调
      handleRemove(file, fileList) {
        console.log('删除回调')
        var json
        if (this.value == null) {
          json = []
        } else {
          try {
            json = JSON.parse(this.value)
          } catch (e) {
            json = [this.value]
          }
        }
        json.splice(file.response.key, 1)
        if (json.length === 0) {
          this.$emit('input', null)
        } else {
          this.$emit('input', JSON.stringify(json))
        }
      }
    }
  }
</script>

<style scoped>

</style>
